<!--  -->
<template>
  <div>
    <div class="groupone">
      
      <div class="groupone_concat" v-for="(item, index) in chfied" :key="index">
      <p class="hui"></p>
      <div class="groupone_title">
        <span>{{item.content}}</span>
        <a href="#">更多 <i class="iconfont">&#xe60c;</i></a>
      </div>
        <div class="group_img">
          <div class="jihe">{{item.banner[0].place_label}}</div>
          <img :src="item.banner[0].thumb" alt="">
          <div class="imgbtm">
            <div class="imgbtm_title">{{item.banner[0].title}}</div>
            <div class="imgbtm_jiage">
              <span>￥</span>
              <span class="s2">{{item.banner[0].price_label}}</span>
              <span>起</span>
            </div>
        </div>
        </div>
        <!--  -->
        <div class="jigsaw_bottom">
                  <!-- 11111 -->
                  <div class="group" v-for="(val, idx) in item.data" :key="idx">
                    <!-- {{val}} -->
                      <div class="g_img">
                          <img :src="val.thumb" alt="">
                          <span>{{val.place_label}}</span>
                      </div>
                      <div class="g_tit">{{val.title}}</div>
                      <div class="g_jiage">
                          <span>￥</span>
                          <a href="">{{val.price_label}}</a>
                          <span>起</span>
                      </div>
                  </div>
                  <!-- 2222222 -->
                   <!-- <div class="group">
                      <div class="g_img">
                          <img src="https://gallery.youxiake.com/Public/Data/upload/productimg/201712/22/5a3c641959873.jpg?imageslim" alt="">
                          <span>VFL...</span>
                      </div>
                      <div class="g_tit">[当地玩乐·故宫+景山]国家宝藏会说话·帝王视角出行+冰窖午餐+解答六大谜团+错峰而行避开人流(4人成行VIP小团)</div>
                      <div class="g_jiage">
                          <span>￥</span>
                          <a href="">178</a>
                          <span>起</span>
                      </div>
                  </div> -->
                  <!-- 33333 -->
                   <!-- <div class="group" style="">
                      <div class="g_img">
                          <img src="https://gallery.youxiake.com/Public/Data/upload/productimg/201712/22/5a3c63f251c24.jpg?imageslim" alt="">
                          <span>VFL...</span>
                      </div>
                      <div class="g_tit">[探索北京·City Walk]2018全年 梦回民国 从欧式建筑群到北京胡同 体验青楼改造的咖啡馆 行走八大胡同 探访赛金花故居感受新旧交替下的北京文化（赠送胡同咖啡一杯）</div>
                      <div class="g_jiage">
                          <span>￥</span>
                          <a href="">128</a>
                          <span>起</span>
                      </div>
                  </div> -->
              </div>
        <!--  -->
      </div>
      

    </div>

  </div>
</template>

<script>
export default {
  props:["classified"],
  data () {
    return {
      chfied:"",
      zyfied:""
    };
  },
  watch:{
    classified(item){
      this.chfied = item;
    }
  }
}

</script>
<style scoped lang="scss">
.hui{
  width: 100%;
  height: .2666666rem;
  background:rgb(247, 244, 244);
}
.groupone{
  width: 100%;
  height: auto;
  .groupone_title{
    width: 100%;
    height: 1.333333rem;
    line-height: 1.333333rem;
    position: relative;
    span{
        color: #333;
        font-size: 0.426666rem;
        font-weight: 1000;
        margin-left: 0.3666rem;
    }
    a{
      text-decoration: none;
      font-size: 0.346666rem;
      position: absolute;
      right: 0.2666rem;
      color: #999;
    }
  }
  .groupone_concat{
    width: 95%;
    margin: 0 auto;
    .group_img{
      width: 100%;
      height: 4.45rem;
      position: relative;
      .jihe{
        position: absolute;
        left: 0;
         font-size: 0.32rem;
         color: #fff;
         padding: 0.1rem;
         background: rgba(0, 0, 0 ,0.5);
         top: 0;
      }
      .imgbtm{
        position: absolute;
        bottom: 0;
        display: flex;
        line-height: 30px;
        .imgbtm_title{
          margin-left: 0.53rem;;
          width: 5.333333rem;
          font-size:  0.426666rem;
          overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
           color: #fff;
           font-weight: 1000;
        }
        .imgbtm_jiage{
          margin-left: 0.86666rem;
          span{
             font-size: 0.32rem;
             color: #ff6000;
          }
          .s2{
            font-size:0.486666rem;
          }
        }
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
  .groupone .groupone_title:before {
    content: "";
    display: inline-block;
    width: .1rem;
    height: .5rem;
    background: #fed101;
    position: relative;
    top: .02rem;
    left: -0.24rem;
}
 .jigsaw_bottom{
        width: 100%;
        height: auto;
        margin-top: 0.1666666rem;
        display: flex;
        .group{
            width: 33.33333%;
            margin-right: 0.1rem;
             height: auto;
             display: flex;
             flex-direction: column;
              background: #fff;
              padding-bottom: 0.166rem;
              border-radius: 0.133333rem;
            .g_img{
                width: 100%;
                height:1.94666666rem;
                background-repeat: no-repeat;
                border-radius: 0.133333rem;
                position: relative;
                 border-top-left-radius: 0.2rem;
                img{
                    width: 100%;
                    height: 100%;
                }
                span{
                    position: absolute;
                    font-size: 0.32rem;
                    color: #fff;
                    padding: 0.1rem;
                    background: rgba(0, 0, 0 ,0.5);
                    top: 0;
                    border-top-left-radius: 0.2rem;
                }
            }
            .g_tit{
                // height: 1.01333333rem;
                text-align: center;
                color: #333;
                font-size: 13px;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-top: 0.2rem;
                line-height: 0.5rem;
                background: #fff;
            }
            .g_jiage{
                margin-left: 0.1rem;
                background: #fff;
                margin-top: 0.15rem;
                    display: flex;
    align-items: center;
                span{
                    font-size: .32rem;
                    color: #ff7100;
                }
                a{
                    font-size: .42rem;
                    font-weight: 400;
                    color: #ff7100;
                    text-decoration: none; 
                }
            }

        }
    }
</style>